<template>
  <footer>
    <div @click="handleClick(index)" v-for="(item,index) in list" :key="index"  :class="{active:currentIndex==index}">{{item}}</div>

    <transition mode="out-in">
        <keep-alive>
            <component :is="coms[currentIndex]"></component>
        </keep-alive>
    </transition>

  </footer>
</template>

<script>
import Banner from './Banner.vue'
import Mine from './Mine.vue'
import Lists from './Lists.vue'
export default {
    name:'App',
    data(){
        return{
            currentIndex:0,
            list:[
                "首页","订单","我的"
            ],
            coms:[Banner,Lists,Mine]
        }
    },
    methods:{
        handleClick(index){
            this.currentIndex = index
        }
    }
}
</script>

<style scoped>
footer {
  width: 100%;
  height: 50px;
  background-color: aliceblue;
  border-top: 1px solid #ccc;
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-around;
}
div {
    line-height: 50px;
}
.active {
    color: red;
}
 .v-enter{ /* 入场动画的初始状态 */
    opacity: 0;
  }
  .v-enter-active{   /* 入场动画执行过程中的状态 */ 
    transition: all 1s;
  }
  .v-enter-to{ /* 入场动画执行结束时的状态 */ 
    opacity: 1;
  }

  .v-leave{ /* 离场动画的初始状态 */
    opacity: 1;
    /* transform: rotate(0deg) scale(1); */
  }
  .v-leave-active{   /* 离场动画执行过程中的状态 */ 
    transition: all 1s;
  }
  .v-leave-to{ /* 离场动画执行结束时的状态 */ 
    opacity: 0;
    /* transform: rotate(360deg) scale(0); */
  }
</style>